<template>
  <div>
    <div class="region-container">
      <el-container>
        <el-main>
          <el-row>
            <el-form :inline="true" size="small" :model="regionFormInline" class="demo-form-inline"
                     @keyup.enter.native="regionQuery" @submit.native.prevent>
              <el-form-item>
                <el-button type="primary" icon="el-icon-plus" v-if="permissions.indexOf('region_add') > -1"
                           @click="regionOpenCreateDialog">添加
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-select
                    v-model="region.pro"
                    @change="changePro()"
                    placeholder="请选择省份">
                  <el-option
                      v-for="item in proOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                    v-model="region.city"
                    @change="changeCity()"
                    placeholder="请选择区域"
                >
                  <el-option
                      v-for="item in cityOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                    v-model="region.country"
                    placeholder="请选择城市"
                >
                  <el-option
                      v-for="item in countryOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="regionPageData.query.id" placeholder="区域编码"/>
              </el-form-item>
              <el-form-item>
                <el-input v-model="regionPageData.query.name" placeholder="名称"/>
              </el-form-item>
              <el-form-item>
                <el-input v-model="regionPageData.query.shortname" placeholder="简称"/>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="regionQuery">查询</el-button>
                <el-button class="margin-left-10" icon="el-icon-delete" @click="regionReset">清空</el-button>
              </el-form-item>
              <el-tooltip effect="dark" content="刷新" placement="top-start">
                <el-button size="small" style="float: right;" icon="el-icon-refresh" @click="regionQuery"
                           circle></el-button>
              </el-tooltip>
            </el-form>
          </el-row>
          <el-table
              border
              stripe
              size="mini"
              :data="regionPageData.pageInfo.records"
              highlight-current-row
              ref="regionTable">
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(regionPageData.pageInfo.current - 1) * regionPageData.pageInfo.size + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="区域编码" align="center" show-overflow-tooltip/>
            <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
            <el-table-column prop="shortname" label="简称" align="center" show-overflow-tooltip/>
            <el-table-column prop="leveltype" label="等级" align="center" show-overflow-tooltip/>
            <el-table-column prop="zipcode" label="邮政编码" align="center" show-overflow-tooltip/>
            <el-table-column prop="lng" label="经度" align="center" show-overflow-tooltip/>
            <el-table-column prop="lat" label="纬度" align="center" show-overflow-tooltip/>
            <el-table-column prop="pinyin" label="拼音" align="center" show-overflow-tooltip/>
            <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip/>
            <el-table-column prop="citycode" label="省级编码" align="center" show-overflow-tooltip/>
            <el-table-column prop="parentid" label="父ID" align="center" show-overflow-tooltip/>
            <el-table-column label="操作" width="200px" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-view" @click="lookRegion(scope.row)">查看</el-button>
                <el-button type="text" size="small" icon="el-icon-edit" @click="regionOpenUpdateDialog(scope.row)"
                           v-if="permissions.indexOf('region_edit') > -1">修改
                </el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="regionDeleteRecord(scope.row)"
                           v-if="permissions.indexOf('region_del') > -1">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" v-show="regionPageData.pageInfo.total>0">
            <el-pagination class="pageBar"
                           background
                           @size-change="regionSizeChange"
                           @current-change="regionCurrentChange"
                           :current-page="regionPageData.pageInfo.current"
                           :page-sizes="[5, 10, 20, 30, 50]"
                           :page-size="regionPageData.pageInfo.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="regionPageData.pageInfo.total">
            </el-pagination>
          </el-row>
        </el-main>
      </el-container>
      <el-dialog
          customClass="regionIndex"
          :title="regionDialogData.regionTitle"
          :visible.sync="regionDialogData.visible"
          :close-on-click-modal="false"
          width="600px"
          append-to-body="true"
          @close="cancelRegionDialog()">
        <el-container>
          <el-main>
            <el-form ref="regionForm" :rules="regionRules" :model="regionDialogData.regionFormData"
                     label-width="80px">
              <el-form-item label="区域编码" ref="id" prop="id">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.id"/>
              </el-form-item>
              <el-form-item label="名称" ref="name" prop="name">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.name"/>
              </el-form-item>
              <el-form-item label="父ID" ref="parentid" prop="parentid">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.parentid"/>
              </el-form-item>
              <el-form-item label="简称" ref="shortname" prop="shortname">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.shortname"/>
              </el-form-item>
              <el-form-item label="等级" ref="leveltype" prop="leveltype">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.leveltype"/>
              </el-form-item>
              <el-form-item label="省级编码" ref="citycode" prop="citycode">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.citycode"/>
              </el-form-item>
              <el-form-item label="邮政编码" ref="zipcode" prop="zipcode">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.zipcode"/>
              </el-form-item>
              <el-form-item label="经度" ref="lng" prop="lng">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.lng"/>
              </el-form-item>
              <el-form-item label="纬度" ref="lat" prop="lat">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.lat"/>
              </el-form-item>
              <el-form-item label="拼音" ref="pinyin" prop="pinyin">
                <el-input :disabled="isRegionLook" v-model="regionDialogData.regionFormData.pinyin"/>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer" v-show="!isRegionLook">
          <el-button @click="regionSaveOrUpdate" type="primary">确 定</el-button>
          <el-button @click="cancelRegionDialog()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import regionApi from "./api/region.service"

export default {
  components: {},
  data() {
    return {
      region:
        {
          pro: "",
          city: "",
          country: ''
        },
      proOptions: [],
      cityOptions: [],
      countryOptions: [],
      regionRules: {
        id: [
          {
            required: true,
            message: '区域编码不能为空！',
          },
        ],
        name: [
          {
            required: true,
            message: '名称不能为空！',
          },
        ],
        parentid: [
          {
            required: true,
            message: '父ID不能为空！',
          },
        ],
        shortname: [
          {
            required: true,
            message: '简称不能为空！',
          },
        ],
        leveltype: [
          {
            required: true,
            message: '等级不能为空！',
          },
        ],
        citycode: [
          {
            required: true,
            message: '省级编码不能为空！',
          },
        ],
        zipcode: [
          {
            required: true,
            message: '邮政编码不能为空！',
          },
        ],
        lng: [
          {
            required: true,
            message: '经度不能为空！',
          },
        ],
        lat: [
          {
            required: true,
            message: '纬度不能为空！',
          },
        ],
        pinyin: [
          {
            required: true,
            message: '拼音不能为空！',
          },
        ],
      },
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
      regionFormInline: {},
      isRegionLook: false,
      regionDialogData: {
        visible: false,
        regionTitle: '',
        regionFormData: {
          id: '',
          name: '',
          parentid: '',
          shortname: '',
          leveltype: '',
          citycode: '',
          zipcode: '',
          lng: '',
          lat: '',
          pinyin: '',
        },
      },
      regionPageData: {
        query: {
          id: '',
          name: '',
          shortname: '',
          leveltype: '1',
        },
        pageInfo: {
          size: 10,
          current: 1,
          total: 0,
        }
      },
    };
  },
  created() {
    this.regionQuery();
    this.init();
  },
  methods: {

    /**
     * 行政区划查询
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionQuery() {
      let _this = this;
      regionApi.getRegionPage(
        Object.assign({
          current: this.regionPageData.pageInfo.current,
          size: this.regionPageData.pageInfo.size
        }, this.regionPageData.query)
      ).then((res) => {
        _this.regionPageData.pageInfo = res.data;
      })
    },
    /**
     * 行政区划查询重置
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionReset() {
      this.regionPageData.query.id = '';
      this.regionPageData.query.name = '';
      this.regionPageData.query.shortname = '';
      this.regionQuery();
    },

    /**
     * 行政区划页码变化
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionSizeChange(val) {
      this.regionPageData.pageInfo.size = val;
      this.regionQuery();
    },

    /**
     * 行政区划当前页
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionCurrentChange(val) {
      this.regionPageData.pageInfo.current = val;
      this.regionQuery();
    },

    /**
     * 行政区划添加
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionOpenCreateDialog() {
      this.regionDialogData.regionTitle = '添加';
      this.regionDialogData.visible = true;
      this.regionDialogData.regionFormData = {
        id: '',
        name: '',
        parentid: '',
        shortname: '',
        leveltype: '',
        citycode: '',
        zipcode: '',
        lng: '',
        lat: '',
        pinyin: '',
      };
    },

    /**
     * 行政区划修改
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionOpenUpdateDialog(row) {
      this.regionDialogData.regionTitle = '修改'
      this.regionDialogData.visible = true;
      let _this = this;
      regionApi.getRegionById(row.id).then((res) => {
        _this.regionDialogData.regionFormData = res.data;
      });
    },

    /**
     * 行政区划保存
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionSaveOrUpdate() {
      let _this = this;
      this.$refs["regionForm"].validate((valid) => {
        if (_this.regionDialogData.regionFormData.id != null) {
          regionApi.updateRegionById(this.regionDialogData.regionFormData).then((res) => {
            if (res.code === 10200) {
              this.$message.success('修改成功！');
              _this.regionDialogData.visible = false;
              _this.regionQuery();
            } else {
              _this.$alert(res.status, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        } else {
          regionApi.saveRegion(this.regionDialogData.regionFormData).then((res) => {
            if (res.code === 10200) {
              this.$message.success('添加成功！');
              _this.regionDialogData.visible = false;
              _this.regionQuery();
            } else {
              _this.$alert(res.status, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }
      })
    },

    /**
     * 行政区划查看
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    lookRegion(row) {
      this.regionDialogData.visible = true;
      this.regionDialogData.regionTitle = "查看";
      this.isRegionLook = true;
      this.regionDialogData.regionFormData = JSON.parse(JSON.stringify(row));
    },

    /**
     * 行政区划关闭
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    cancelRegionDialog() {
      let obj = {
        id: '',
        name: '',
        parentid: '',
        shortname: '',
        leveltype: '',
        citycode: '',
        zipcode: '',
        lng: '',
        lat: '',
        pinyin: '',
      }
      this.regionDialogData.regionFormData = obj
      this.$refs["regionForm"].resetFields()
      this.regionDialogData.visible = false
      this.isRegionLook = false

    },

    /**
     * 行政区划删除
     * @author wangwuhui
     * @date 2021-04-01 22:03:09
     */
    regionDeleteRecord(data) {
      if (data.id <= 0) {
        this.$alert('请先选择一条要删除的记录！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return
      }

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        regionApi.deleteRegion(data.id).then((res) => {
          if (res.data > 0) {
            this.$message({
              type: 'success',
              message: '行政区划删除成功!'
            })
            this.regionQuery()
          } else {
            this.$message({
              type: 'error',
              message: '行政区划删除失败!'
            })
          }

        })
      })
    },

    /**
     * 初始化省份下拉框
     * @author wangwuhui
     * @date 2021-04-01 22:30:09
     */
    init() {
      regionApi.initPro({
        id: this.regionPageData.query.id,
        leveltype: this.regionPageData.query.leveltype
      }).then(res => {
        if (res.code === 10200) {
          this.proOptions = res.data;
        }
      })
    },

    /**
     * 切换省份下拉框
     * @author wangwuhui
     * @date 2021-04-01 22:43:09
     */
    changePro(level) {
      regionApi.initPro({
        id: this.region.pro,
        leveltype: 2
      }).then(res => {
        if (res.code === 10200) {
          this.cityOptions = res.data;
          this.region.city="";
          this.region.country="";
          this.countryOptions="";
        }
      })

    },

    /**
     * 切换城市下拉框
     * @author wangwuhui
     * @date 2021-04-01 23:13:09
     */
    changeCity(level) {
      regionApi.initPro({
        id: this.region.city,
        leveltype: 3
      }).then(res => {
        if (res.code === 10200) {
          this.countryOptions = res.data;
          this.region.country="";
        }
      })

    }

  }
}
</script>
